<template>
	<div>
<!--		<el-row>-->
<!--			<el-col :span="24">-->
<!--				<el-form :inline="true" :model="state.query">-->
<!--					<el-form-item label="提现编号">-->
<!--						<el-input clearable v-model="state.query.id" placeholder="请输入用户编号" />-->
<!--					</el-form-item>-->
<!--					<el-form-item label="角色">-->
<!--						<el-select clearable v-model="state.query.isAccredit" placeholder="角色类别">-->
<!--							<el-option label="普通用户" value="0" />-->
<!--							<el-option label="授权商" value="1" />-->
<!--						</el-select>-->
<!--					</el-form-item>-->

<!--					<el-form-item label="手机号">-->
<!--						<el-input clearable v-model="state.query.cellPhone" placeholder="请输入手机号" />-->
<!--					</el-form-item>-->

<!--					<el-form-item label="角色状态">-->
<!--						<el-select clearable v-model="state.query.status" placeholder="角色状态">-->
<!--							<el-option label="使用" value="1" />-->
<!--							<el-option label="停用" value="0" />-->
<!--						</el-select>-->
<!--					</el-form-item>-->

<!--					<el-form-item>-->
<!--						<el-button type="primary" @click="init">搜索</el-button>-->
<!--					</el-form-item>-->
<!--				</el-form>-->
<!--			</el-col>-->
<!--		</el-row>-->
		<el-row style="margin-bottom: 20px">
			<el-col :span="24">
				审核状态：
				<el-segmented @change="query" v-model="state.statue" :options="options" size="default" />
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="24">
				<el-table :data="state.userList" border style="width: 100%">
					<el-table-column prop="businessCode" label="业务号" align="center" />
					<el-table-column prop="accountName" label="姓名" align="center"></el-table-column>
					<el-table-column prop="accountNumber" label="提现账号" align="center" />
					<el-table-column prop="accountPhone" label="手机号" align="center" />
					<el-table-column prop="businessCode" label="身份证号" align="center" />
					<el-table-column prop="withdrawAmount" label="提现金额" align="center" />
					<el-table-column prop="withdrawTime" label="提现时间" align="center" />
					<el-table-column v-if="state.statue === '提现失败'" prop="failMsg" label="失败原因" align="center" />
					<el-table-column v-if="state.statue === '提现成功'" prop="transferImage" label="转账凭证" align="center" >
						<template #default="props">
							<el-image style="width: 100px; height: 100px" :src="props.row.transferImage" fit="fit" />
						</template>
					</el-table-column>
					<el-table-column prop="status" label="当前状态" align="center" >
						<template #default="props">
							<el-tag v-if="props.row.status === 0 " type="primary">未审核</el-tag>
							<el-tag v-if="props.row.status === 1 " type="warning">提现失败</el-tag>
							<el-tag v-if="props.row.status ===2 " type="success">提现成功</el-tag>
							<el-tag v-if="props.row.status ===3 " type="info">用户取消</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center">
						<template #default="props">
<!--							用户取消按钮-->
							<el-button v-if="props.row.status === 0  "  link type="primary" size="small" @click="process(props.row)">审核</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<div class="pagination-container">
			<el-pagination
				:page-size="state.page.pageSize"
				layout="prev, pager, next"
				:total="state.page.total"
				@current-change="handleCurrentChange"
			/>
		</div>
		<el-dialog v-model="state.dialogVisible " title="审核" width="500" >
			<el-descriptions  style="margin-bottom: 20px" border  :column="2">
				<el-descriptions-item label="本次提现">200 元</el-descriptions-item>
				<el-descriptions-item label="总收益">1000 元</el-descriptions-item>
				<el-descriptions-item label="已提现">300 元</el-descriptions-item>
				<el-descriptions-item label="可提现">300 元</el-descriptions-item>
			</el-descriptions>
			<el-form
				:model="state.from"
				ref="ruleFormRef"
				:rules="rules"
				style="max-width: 600px">
				<el-form-item label="审核状态" prop="status">
					<el-select v-model="state.from.status" placeholder="选择审核状态">
						<el-option label="提现失败" :value=1 />
						<el-option label="提现成功" :value=2 />
					</el-select>
				</el-form-item>
				<el-form-item label="失败信息">
					<el-input :rows="2" type="textarea" placeholder="请输入失败原因" v-model="state.from.failMsg" />
				</el-form-item>
				<el-form-item label="转账凭证">
					<el-upload
						class="avatar-uploader"
						:action="state.imgPath"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						accept=".jpg,.png"
					>
						<img v-if="state.from.transferImage" :src="state.from.transferImage" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon">
							<Plus />
						</el-icon>
					</el-upload>
				</el-form-item>
			</el-form>
			<template #footer>
      <span class="dialog-footer">
        <el-button @click="submitForm(ruleFormRef)">确 定</el-button>
      </span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { postRequest } from '~/composables/http'
import type {  FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const options = ['全部', '审核中','提现成功', '提现失败',  '用户取消']
const state = reactive(<any>{
	imgPath: import.meta.env.VITE_API_BASE_URL + "api/file/upload?type=7",
	dialogVisible: false,
	statue: '全部',
	query: {},
	from:{},
	page: {
		pageNo: 1,
		pageSize: 8,
		total: 0
	},
	userList: [],
})
const rules = reactive<FormRules<any>>({
	status: [
		{ required: true, message: '审核状态不能为空', trigger: 'blur' },
	],
})
// 定义映射关系对象
const optionsMap: any = {
	'全部'  : -1,
	'审核中':  0,
	'提现成功': 2,
	'提现失败': 1,
	'用户取消': 3
}
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			postRequest("/api/admin/finance/audit",state.from).then(() =>{
				toast.success("审核成功")
				init()
				state.dialogVisible = false
			})
		}
	})
}


/**
 * 项目类型转换
 * @param value
 */
function getLabelByValue(value: string): number {
	return optionsMap[value] || -1 // 如果未找到对应的 label，返回 "未知"
}

function init() {
	state.query.pageValidate = state.page
	state.query.status = getLabelByValue(state.statue)
	postRequest('/api/admin/finance/page', state.query).then((res: any) => {
		state.userList = res.data.lists
		state.page.pageNo = res.data.pageNo
		state.page.pageSize = res.data.pageSize
		state.page.total = res.data.count
	})
}
function query() {
	init()
}

/**
 * 转账凭证上传
 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
	//显示视频
	state.from.transferImage = response.data.url
	console.log('上传成功：', state.from.transferImage)
}

/**
 * 修改用户信息
 */
function process(row:any) {
	state.dialogVisible = true
	state.from.id = row.id
}

/**
 * 搜索
 */

function queryBtn() {

}

/**
 * 修改
 */
function update(data: any) {
	state.updateDialogVisible = true
	state.updateFrom.id = data.id
	state.updateFrom.nickName = data.nickName
	state.updateFrom.cellPhone = data.cellPhone
	state.updateFrom.imageUrl = data.imageUrl
	state.updateFrom.status = data.status.toString()
	state.updateFrom.roleType = data.roleType.toString()
}


/**
 * 分页
 * @param val
 */
const handleCurrentChange = (val: number) => {
	state.page.pageValidate.pageNo = val
	init()
}

onMounted(() => {
	init()
})

</script>
<style scoped>

:deep(.el-form-item__content) {
	width: 150px;
}

.pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 20px; /* 可根据需要调整外边距 */
}

:deep(.avatar-uploader .el-upload) {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
	border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
